<template>
    <div>
        <v-head></v-head>
        <div class="content-box" style="left:0; top: 87px;">
            <div class="container" style="border:0">
              <el-row class="mt20">
                    <el-col :span="10"><span><span class="red">*</span>旧密码：</span></el-col>
                    <el-col :span="4"><el-input v-model="oldPwd" type="password"></el-input></el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="10"><span><span class="red">*</span>新密码：</span></el-col>
                    <el-col :span="4"><el-input v-model="newPwd" type="password"></el-input></el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="10"><span><span class="red">*</span>确认密码：</span></el-col>
                    <el-col :span="4"><el-input v-model="confirmPwd" type="password"></el-input></el-col>
                </el-row>
                <div class="btn-container" style="margin: 40px 0 0 601px;">
                    <el-button @click="updatePwd" :loading="btnloading">确定</el-button>
                </div>
            </div>
        </div>       
    </div>
</template>

<script>
import { mapState } from "vuex";
import vHead from "../common/Header.vue";
export default {
  components: {
    vHead
  },
  data() {
    return {
      oldPwd:"",
      newPwd:"",
      confirmPwd:"",
      btnloading:false
    };
  },
  mounted() {
    const htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.removeAttribute('style');
    if(localStorage.getItem('pageType') == 1) {
        this.$router.push({ path:'/dashboard' });
    }
  },
  computed: mapState({
    msg: state => state.user.msg,
  }),
  methods: {
    updatePwd() {
            if(this.oldPwd == "") {
                this.$message('请输入旧密码');
            }else if(this.newPwd == "") {
                this.$message('请输入新密码');
            }else if(this.newPwd !== this.confirmPwd) {
                this.$message('确认密码和新密码不同，请重新输入');
            }else{
                this.btnloading = true;
                this.$store.dispatch('updatePassword',{
                    newPwd: this.newPwd,
                    oldPwd: this.oldPwd,
                    sessionId: localStorage.getItem('sessionId')
                }).then(() => {
                    if(this.msg == '修改密码成功！') {
                      this.btnloading = false;
                      this.$message(this.msg);
                      this.$router.push('/user');
                    }else{
                      this.btnloading = false;
                      this.$message(this.msg);
                    }
                })
            }  
        }
  }
};
</script>


<style scoped>
.box_container {
  float: left;
  height: 230px;
  background-color: #fff;
  border: 1px solid #e6eaef;
  border-top: 4px solid #d6d6d6;
  border-radius: 4px;
  margin: 20px 0 0 20px;
}
.box_title {
  font-size: 12px;
  padding: 10px 0 10px 10px;
}
.table_container {
  height: 164px;
}
.el-table .cell,
.el-table th div,
.el-table--border td:first-child .cell,
.el-table--border th:first-child .cell {
  padding-left: 0px;
}
.more {
  line-height: 36px;
  color: #606266;
  font-size: 12px;
}
.tableContainer{
  width: 90%;
  margin: 30px auto 20px auto;
}
</style>
